<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "donghuaView",
    data(){
        return{
            flag:true,
        }
    },
    methods:{

    }
})
</script>

<template>
<div>
    <button @click="flag=!flag">按钮</button>
    <transition >
        <div class="box" v-if="flag"></div>
    </transition>
    <transition name="one">
        <div class="box" v-if="flag" ></div>
    </transition>

</div>
</template>

<style scoped lang="less">
.box{
  width: 100px;
  height: 100px;
  background-color: green;
}
.v-enter{
  transform: translate(500px);
}
.v-enter-to{
  transform: translate(0px);
}
.v-enter-active{
  transition: all 3s;
}
.v-leave{
  transform: translate(0px);
}
.v-leave-to{
  transform: translate(500px);
}
.v-leave-active{
  transition: all 3s;
}


.one-enter{
  transform: translate(0px);
}
.one-enter-to{
  transform: translate(500px);
}
.one-enter-active{
  transition: all 3s;
}
.one-leave{
  transform: translate(500px);
}
.one-leave-to{
  transform: translate(0px);
}
.one-leave-active{
  transition: all 3s;
}
</style>